<template>
    <el-dialog v-model="dialogVisible" :title="winTitle" :close-on-click-modal="false" append-to-body width="800"
        class="editDialog" align-center>


        <el-form inline class="basicForm" label-position="right" :model="formData" ref="formRef" :rules="rules"
            label-width="120px">
            <el-form-item label="菜单编码" style="width: 98%;" prop="code" required>
                <el-input v-model="formData.code" placeholder="请输入菜单编码"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="菜单标题" style="width: 98%;" prop="title" required>
                <el-input v-model="formData.title" placeholder="请输入菜单标题"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="菜单路由" style="width: 98%;" prop="path" required>
                <el-input v-model="formData.path" placeholder="请输入菜单路由"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="菜单图标" style="width: 98%;">
                <el-input v-model="formData.icon" placeholder="请输入菜单图标"></el-input>
            </el-form-item>
            <br />

            <el-form-item label="是否展开" style="width: 98%;">
                <el-select v-model="formData.active">
                    <el-option v-for="item in ynList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <br />
            <el-form-item label="重定向地址" style="width: 98%;">
                <el-input v-model="formData.redirectPath" placeholder="请输入重定向地址"></el-input>
            </el-form-item>
        </el-form>


        <template #footer>
            <el-button @click="dialogVisible = false" auto-insert-space>取消</el-button>
            <el-button type="primary" @click="onConfirm" auto-insert-space>确定</el-button>
        </template>

    </el-dialog>
</template>

<script lang="js" setup>

import { ref, defineProps, reactive } from "vue";

import { ElMessage } from "element-plus";

import { reqMenuSave } from "@/utils/requests";
import { tr } from "element-plus/es/locales.mjs";

const ynList = ref([
    { label: "是", value: 'true' },
    { label: "否", value: 'false' }
]);


let winTitle = ref("");

let dialogVisible = ref(false);

// eslint-disable-next-line no-undef,no-unused-vars
const emits = defineEmits(["confirm"]);

// 规则：trigger 千万别省
const rules = reactive({
    menuCode: [
        { required: true, message: '请输入菜单编码', trigger: 'blur' }   // trigger 必写
    ],
})

let formRef = ref();

/* 1. 初始值常量 */
const initialForm = () => ({
    id: null,
    icon: '',
    code: '',
    pcode: '',
    path: '',
    title: '',
    active: 'false',
    orderNum: -1,
    type: 1,
    redirectPath: ''
})

let formData = reactive(initialForm());

let isEdit = ref(false);

const openDialog = (rowData) => {
    dialogVisible.value = true; 

    if (!rowData || rowData.id === null) {
        winTitle.value = "新增" + (formData.type === 1 ? "目录" : "菜单");

        Object.keys(formData).forEach(k => delete formData[k]);

        Object.assign(formData, initialForm());

        isEdit.value = false;
    } else {
        winTitle.value = "修改" + (formData.type === 1 ? "目录" : "菜单");

        Object.assign(formData, rowData);

        isEdit.value = true;
    }
};

const onConfirm = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            reqMenuSave(formData).then(res => {
                ElMessage.success("保存成功");

                dialogVisible.value = false;

                emits("confirm");
            });

        } else {
            const firstMsg = Object.keys(fields)
                .map(k => fields[k][0]?.message)
                .find(Boolean)

            ElMessage.error(firstMsg)

            return false;
        }
    });

};

defineExpose({ openDialog });

</script>


<style scoped lang="scss">
.basicForm,
.selectionForm {
    >* {
        width: calc(50% - 20px);
        margin-right: 20px;

        .selectInput {
            flex: 1;
        }

        :deep(.el-date-editor) {
            width: 100%;
        }
    }

    >.long {
        width: calc(100% - 20px);
        margin-right: 20px;
    }

    .sumUnit {
        .text {
            margin-right: 10px;
        }
    }
}
</style>